<template>
  <div>
    <div id="mouse-position"></div>
    <div class="switch-map">
      <img src="../../../img/vector.png" @click="switchImage(false)" />
      <img src="../../../img/image.png" @click="switchImage(true)" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, inject, ref } from "vue";
const $map = ref();
onMounted(() => {
  $map.value = inject("$map");

  //设置导航控件
  const navControl = new ol.control.ZoomToExtent({
    extent: [
      114.24, // 左下角 x 坐标
      30.44, // 左下角 y 坐标
      114.5, // 右上角 x 坐标
      30.54, // 右上角 y 坐标
    ],
  });
  $map.value.addControl(navControl);

  //设置鼠标控件
  var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: "EPSG:4326",
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
    undefinedHTML: "&nbsp;",
  });
  $map.value.addControl(mousePositionControl);
});
//通过设置Visible来设置影像地图和矢量地图的显隐
function switchImage(isShow) {
  const layers = $map.value.getLayers().array_;
  layers[2].setVisible(isShow);
  layers[3].setVisible(isShow);
}
</script>

<style lang="scss" scoped>
#mouse-position {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.switch-map {
  position: fixed;
  right: 50px;
  bottom: 20px;
  img {
    width: 80px;
    height: 80px;
    margin-left: 20px;
    border: 2px solid white;
    border-radius: 10px;
    &:hover {
      border-color: rgb(35, 95, 249); /* 设置边框颜色为蓝色 */
    }
  }
}
</style>
